<template>
  <div>
    <el-form :model="froSchoolQuery" inline ref="queryFormRef">
      <el-form-item
      >
        <el-input placeholder="关键字" v-model="froSchoolQuery.keywords"></el-input
        >
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="froSchoolQuery.status"
            placeholder="请选择状态"
            style="width: 240px"
        >
          <el-option label="正常" :value="0"/>
          <el-option label="禁用" :value="1"/>
          <el-option label="全部" :value="-1"/>
        </el-select>
      </el-form-item>
      <el-form-item
      >
        <el-button :icon="Search" @click="getSchoolList">查询</el-button>
      </el-form-item
      >
      <el-form-item
      >
        <el-button :icon="Refresh" @click="queryFormRef?.resetFields()"
        >重置
        </el-button
        >
      </el-form-item
      >
    </el-form>
    <el-button :icon="Plus" @click="dialogVisible = true">新增</el-button>
    <el-table :data="froSchoolList" v-loading="loading">
      <el-table-column prop="schoolId" label="学校编号"/>
      <el-table-column prop="shortName" label="简称"/>
      <el-table-column prop="schoolName" label="学校名称"/>
      <el-table-column prop="establishmentYear" label="成立年份">
        <template #default="scope">
          {{
            scope.row.establishmentYear
                ? scope.row.establishmentYear.toISOString().split("T")[0]
                : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column prop="schoolType" label="学校级别"/>
      <el-table-column prop="website" label="学校网站链接">
        <template #default="scope">
          <a :href="scope.row.website" target="_blank">{{ scope.row.website }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ scope.row.status === 0 ? "正常" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template #default="scope">
          {{
            scope.row.createTime ? scope.row.createTime.toISOString().split("T")[0] : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text
          >
            <el-icon>
              <EditPen/>
            </el-icon>
            修改
          </el-text
          >
          <el-divider direction="vertical"/>
          <el-text
          >
            <el-icon>
              <Delete/>
            </el-icon>
            删除
          </el-text
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          :page-size="froSchoolQuery.pageSize"
          :pager-count="froSchoolQuery.pageNum"
          layout="prev, pager, next"
          :total="froSchoolQuery.total"
      />
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogIsAdd ? '新增' : '修改'" width="500">
      <div>
        <el-form :model="froSchool" :rules="rules" ref="froSchoolForm" label-width="120px">
          <el-form-item label="学校编号" prop="schoolId">
            <el-input v-model="froSchool.schoolId" disabled></el-input>
          </el-form-item>
          <el-form-item label="简称" prop="shortName">
            <el-input v-model="froSchool.shortName"></el-input>
          </el-form-item>
          <el-form-item label="学校名称" prop="schoolName">
            <el-input v-model="froSchool.schoolName"></el-input>
          </el-form-item>
          <el-form-item label="成立年份" prop="establishmentYear">
            <el-date-picker
                v-model="froSchool.establishmentYear"
                type="year"
                placeholder="选择年份"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="froSchool.email"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="froSchool.address"></el-input>
          </el-form-item>
          <el-form-item label="学校级别" prop="schoolType">
            <el-input v-model="froSchool.schoolType"></el-input>
          </el-form-item>
          <el-form-item label="学校网站链接" prop="website">
            <el-input v-model="froSchool.website"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="froSchool.status" placeholder="请选择状态">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)"> 保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import {Search, Refresh, Delete, EditPen, Plus} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import type {FormInstance, FormRules} from "element-plus";
import type {FroSchool} from "@/api/front/school/type";
import {reqGetSchoolList, reqAddSchool, reqModifySchool} from "@/api/front/school";

let froSchoolQuery = reactive({
  pageNum: 0,
  pageSize: 7,
  keywords: "",
  status: -1,
  total: 0,
});
let froSchool = reactive<FroSchool>({
  schoolId: "",
  shortName: "",
  schoolName: "",
  establishmentYear: null,
  email: "",
  address: "",
  schoolType: "",
  website: "",
  status: 0,
  createTime: null,
});
let dialogVisible = ref(false);
let dialogIsAdd = ref(true);
let loading = ref(true);
let formRef = ref<FormInstance>();
let queryFormRef = ref<FormInstance>();
let froSchoolList = ref<FroSchool[]>([]);

function getSchoolList() {
  reqGetSchoolList(froSchoolQuery).then((res) => {
    froSchoolList.value = res.data.list;
    loading.value = false;
  });
}

let submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return; //表单校验
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dialogIsAdd.value) {
        reqAddSchool(froSchool).then(() => {
          ElMessage({
            message: "新增成功！",
            type: "success",
          });
        });
      } else {
        reqModifySchool(froSchool).then(() => {
          ElMessage({
            message: "修改成功！",
            type: "success",
          });
        });
      }
      dialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {
  getSchoolList();
});
const rules = {
  shortName: [{required: true, message: "请输入简称", trigger: "blur"}],
  schoolName: [{required: true, message: "请输入学校名称", trigger: "blur"}],
  email: [
    {required: true, message: "请输入邮箱", trigger: "blur"},
    {type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]},
  ],
  address: [{required: true, message: "请输入地址", trigger: "blur"}],
  schoolType: [{required: true, message: "请输入学校级别", trigger: "blur"}],
  website: [{required: true, message: "请输入学校网站链接", trigger: "blur"}],
  status: [{required: true, message: "请选择状态", trigger: "change"}],
};
watch([() => froSchoolQuery.pageNum, () => froSchoolQuery.pageSize], () => {
  getSchoolList();
});
</script>
